<template>
  <div class="container">
    <left-page class="left-page" />
    <right-page class="right-page" />
  </div>
</template>
<script setup lang="ts">
import leftPage from './leftPage/leftPage.vue'
import rightPage from './rightPage/rightPage.vue'
</script>
<style scoped lang="scss">
.container {
  // margin-top: 20px;
  display: flex;
  flex-direction: row;
  gap: 1.25rem;
  .left-page {
    flex: 1;
    // height: 400px;
    min-width: 400px;
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .container {
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    gap: 1rem;

    .left-page {
      order: 1;
    }

    .right-page {
      order: 2;
    }
  }
}
</style>
